<template>
  <div class="box">
      <div class="cnt">
          <div class="IMG">
              <img class="img" :src="res.coverImgUrl" alt="">
          </div>
          <div class="right">
              <h2 class="h2">{{res.name}}</h2>
              <div class="fc">
                  <i class="el-icon-watch"></i>
                  <span class="fc3">最近更新：{{res.trackUpdateTime | time('MM月DD日')}} &nbsp;</span>
                  <span class="fc4">{{res.updateFrequency}}</span>
              </div>
              <div class="button">
                  <span class="span">
                    <a class="a1" href="#"><i class="el-icon-video-play"></i>&nbsp;播放</a>
                    <a class="a2" href="#">+</a>
                  </span>
                  <a class="a3" href="#"><i class="el-icon-folder-add"></i> (3766906)</a>
                  <a class="a3 a4" href="#"><i class="el-icon-share"></i> ({{res.trackCount}})</a>
                  <a class="a3 a5" href="#"><i class="el-icon-download"></i> 下载</a>
                  <a class="a3 a6" href="#"><i class="el-icon-chat-line-square"></i>({{res.subscribedCount}})</a>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import { getDetailList } from '@/api/RankingList'
export default {
  data () {
    return {
      res: {}
    }
  },
  props: {
    list: {
      type: Array
    },
    id: {
      type: Number,
      default: 19723756
    }
  },
  created () {
    this.getDetailList()
  },
  methods: {
    async getDetailList () {
      const { data } = await getDetailList()
      this.res = data.list.filter(v => v.id === this.id)[0]
    }
  },
  watch: {
    id: function (val) {
      this.res = this.list.filter(v => v.id === val)[0]
    },
    immediate: true
  }
}
</script>

<style scoped>
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .cnt{
        display: flex;
        justify-content: space-between;
        width: 660px;
        height: 150px;
    }
    .IMG{
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
        padding: 1px;

    }
    .img{
        width: 146px;
        height: 146px;
    }
    .right{
        width: 473px;
        height: 150px;
    }
    .h2 {
        font-size:20px;
        font-weight: normal;
        margin-top: 20px;
        color: #333;
    }
    .fc{
        height: 34px;
        line-height: 34px;
        font-size: 12px;
        margin-bottom: 20px;
    }
    .button{
        width: 500px;
        height: 31px;
        font-size: 12px;

    }
    .span{
        height: 31px;
        margin-right: 8px;
    }
    .a1{
        float: left;
        width: 62px;
        height: 31px;
        text-align: center;
        line-height: 31px;
        background-color: #3F8ED8;
        box-shadow:2px 2px 2px #ccc;
        color: #fff;
        border-top-left-radius:2px;
        border-bottom-left-radius:2px;
        border-right:1px solid #2D68A1 ;
    }
    .a2{
        float: left;
        width: 31px;
        height: 31px;
        line-height: 31px;
        background-color: #3F8ED8;
        text-align: center;
        box-shadow:2px 2px 2px #ccc;
        border-top-right-radius:2px;
        border-bottom-right-radius:2px;
        color: #fff;
    }
    .a3{
        display: inline-block;
        text-align: center;
        width: 100px;
        height: 31px;
        line-height: 31px;
        border-radius: 3px;
        background-color: #FFFFFF;
        box-shadow:2px 2px 2px #ccc;
        border: 1px solid #C4C4C4;
        margin-right:8px ;
        color: #000;
    }
    .a4{
        width: 92px;
    }
    .a5{
        width: 62px;
    }
    .a6{
        width: 92px;
        margin: 0;
    }
</style>
